<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/angularjs/angular.min.js"></script>
</head>
<body ng-app="MyModule">
    <div ng-controller="myCtrl">
        父容器：<input ng-model="ctrlFlavor">
        <drink zk="{{ctrlFlavor}}"></drink>
        <div drink1 zk1="{{ctrlFlavor}}"></div>
        <div drink2>{{ctrlFlavor}}</div>
        <div drink3 zk3="ctrlFlavor"></div>
    </div>
    <script>
        var myModule=angular.module("MyModule",[]);
        myModule.controller('myCtrl',['$scope',function($scope){
            $scope.ctrlFlavor="88888";
        }])
        myModule.directive("drink",function(){
            return{
                restrict:'AE',
                scope:{
                    zk:'@'
                },
                template:"<div>{{zk}}</div>"
            }
        });
        myModule.directive("drink1",function(){
            return{
                restrict:'AE',
                scope:{
                    zk1:'@'
                },
                template:"<div>@<input ng-model='zk1'>【把当前的属性作为字符串传递，也就是父框中的变化，本框跟着变化，反之不成立】</div>"
            }
        });
        myModule.directive("drink2",function(){
            return{
                restrict:'AE',
                scope:{}
            }
        });
        myModule.directive("drink3",function(){
            return{
                restrict:'AE',
                scope:{
                    zk3:'='
                },
                template:"<div>=<input ng-model='zk3'>【与父scope中的属性进行双向绑定，也就是本框修改，父框也修改，反之也成立】</div>"
            }
        });
    </script>
</body>
</html>